<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>经营分析</title>
        <meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
        <link rel="stylesheet" href="../../../style/mobile/operationAnalysis.css"/>
        <link rel="stylesheet" href="../../../style/mobile/mainO.css"/>
        <style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
		</style>
    </head>
    
    <body>
    	<header class="header-bar header-bar-nav">
    		<a class="header-icon header-left" href="javascript:;" id="backRef"></a>
    		<h1 class="header-title" id="titleTest">经营分析</h1>
    	</header>
    	<div class="operationMain bsmt44">
	    	<nav class="bespeakNav">
			  <ul class="list-top">
			    <li class="on" id="item1"> <a href="javascript:void(0);">近7天</a> </li>
			    <li id="item2"> <a href="javascript:void(0);"></a>近30天</li>
			    <li id="item3"> <a href="javascript:void(0);"></a>更多收入</li>
			  </ul>
			</nav>
	    	
	    	<div class="dateAndM">
	    		<div class="andM">
	    			<h1 id="thisAllData">￥0</h1>
	    			<p class="gray97" id="paymentAmt">交易总额</p>
	    		</div>
	    		
	    		<div class="businessDataSc"></div>
	    		
	    		<p class="dateA f8">
	    			<span class="startD"> </span> 至 
	    			<span class="endD"> </span>
	    		</p>
	    	</div>
	    	
	    	<div class="tabCon">
				<div class="chart" id="lineChart"></div>
	    	</div>
    	</div>
    	<!--
        	作者：offline
        	时间：2017-10-01
        	描述：占位
        -->
    	<div class="businessDataSc"></div>
    	
    	<div class="businessData">
    		<h3 class="f10">
    			<span class="businessIcon"><img src="../../../images/mobile/businessIcon.png"/> 营业数据</span>
    			<a href="operationDetail.html" class="IconRight">更多</a>
    		</h3>
    		
    		<div class="datalist">
    			<div class="dataItem mr">
    				<h3 class="f11 Amt1">￥0.00</h3>
    				<p class="gray97 f9 count1">0笔</p>
    				<p class="gray97 f6 padtb5">比上月 <span class="red33c lastMonth1"> + ￥0 </span> </p>
    				<p class="dataLineT bluedd4 date1"> 2017年7月 </p>
    			</div>
    			<div class="dataItem mr">
    				<h3 class="f11 Amt2">￥0.00</h3>
    				<p class="gray97 f9 count2">0笔</p>
    				<p class="gray97 f6 padtb5">比上月 <span class="red33c lastMonth2"> + ￥0 </span> </p>
    				<p class="dataLineT bluedd4 date2"> 2017年7月  </p>
    			</div>
    			<div class="dataItem">
    				<h3 class="f11 Amt3">￥0.00</h3>
    				<p class="gray97 f9 count3">0笔</p>
    				<p class="gray97 f6 padtb5">比上月 <span class="red33c lastMonth3"> + ￥0 </span> </p>
    				<p class="dataLineT bluedd4 date3"> 2017年7月  </p>
    			</div>
    		</div>
    		
    	</div>
    	
    	<script src="../../../script/jquery-1.10.2.min.js"></script>
        <script src="../../../script/echarts.min.js"></script>
        <script src="../../../script/comUr.js"></script>
        
    	<script type="text/javascript">
    		var sessionId = getUrlParam('sessionId');
	    	if (sessionId){//地址栏有这些数据
	    		/* alert("sessionId=========" + sessionId); */
	    	    setcache("sessionId", sessionId); //存sessionId
	    	    console.log("链接里面的" + getcache("sessionId"));
	    	} else {//没有从缓存里取
	    	    sessionId = getcache("sessionId"); //sessionId
	    	    console.log("读取缓存" + sessionId);
	    	}
    		
    		//营业数据查询
    		function historyData(){
			    var aRequestData;
			    function aSuccessFunc(data){
			    	console.log('历史数据' + data);
			    	$(".Amt1").html(" ￥ " + FormatMoney(data.info.previousMonth.paymentAmt, 2));
			    	$(".count1").html(data.info.previousMonth.count + " 笔 ");
			    	$(".lastMonth1").html("+ ￥" + data.info.previousMonth.compareLastMonth);
			    	$(".date1").html(data.info.previousMonth.date);
			    	$(".Amt2").html(" ￥ " + FormatMoney(data.info.beforeTwoMonth.paymentAmt, 2));
			    	$(".count2").html(data.info.beforeTwoMonth.count + " 笔 ");
			    	$(".lastMonth2").html("+ ￥" + data.info.beforeTwoMonth.compareLastMonth);
			    	$(".date2").html(data.info.beforeTwoMonth.date);
			    	$(".Amt3").html(" ￥ " + FormatMoney(data.info.beforeThreeMonth.paymentAmt, 2));
			    	$(".count3").html(data.info.beforeThreeMonth.count + " 笔 ");
			    	$(".lastMonth3").html("+ ￥" + data.info.beforeThreeMonth.compareLastMonth + "");
			    	$(".date3").html(data.info.beforeThreeMonth.date);
			     }
			    function aErrorFunc(){
			       console.log('未知错误');
			    }
    			httpAjaxSession('POST','/ordLog/history', aRequestData, aSuccessFunc, aErrorFunc, aTimeOut);
    		}
    		
    		var today,sevenDate,thirtyDate,startsDate,endDate;
    		var thisData = [];
    		
    		startsDate = getUrlParam('startsDate');
    		endDate = getUrlParam('endDate');
    		
    		//计算时间begin
		    function getBeforeDate(n) {
		        var n = n;
		        var d = new Date();
		        var year = d.getFullYear();
		        var mon = d.getMonth() + 1;
		        var day = d.getDate();
		        if(day <= n) {
		            if(mon > 1) {
		                mon = mon - 1;
		            } else {
		                year = year - 1;
		                mon = 12;
		            }
		        }
		        d.setDate(d.getDate() - n);
		        year = d.getFullYear();
		        mon = d.getMonth() + 1;
		        day = d.getDate();
		        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
		        return s;
		    }
		    today = getBeforeDate(1); //今天的日期
		    sevenDate = getBeforeDate(7); //前七天的日期 
		    thirtyDate = getBeforeDate(30); //前三十天的日期
    		//计算时间end
    		
			//调用历史数据
			historyData();
    		
    		if(!(startsDate && endDate)){
    			//调用近7天数据
    			sevenData();
    			console.log('第一次进入页面加载');
    		}else{
    			$("#item1").removeClass('on');
    			$("#item2").removeClass('on');
    			$("#item3").addClass('on');
    			$(".startD").html(startsDate);
    			$(".endD").html(endDate);
    			moreData();
    		}
    		
    		//tab切换
			function tab(tabBnt){
				//显示更多数据
	    		$("#item3").click(function(){
	    			window.location.href = 'operationDate.html';
	    		})
				$(tabBnt).click(function(){
					var tabthis = $(this).index();
					$(this).addClass('on').siblings().removeClass('on');
					$('.tabCon').children().eq(tabthis).show().siblings().hide();
				});
				//显示近7天数据
				$("#item1").click(function(){
	    			$(".startD").html(sevenDate);
		    		$(".endD").html(today);
		    		sevenData();
	    		})
				//显示近30天数据
				$("#item2").click(function(){
					$(".startD").html(thirtyDate);
    				$(".endD").html(today);
    				thirtyData();
	    		})
			}
			$(function(){
				tab('.list-top li')
			})
			
			/**近7天*/
			function sevenData(){
				
				$(".startD").html(sevenDate);
	    		$(".endD").html(today);
	    		
				var param = {};
			    param["beginDate"] = sevenDate;
			    param["endDate"] = today;
			
			    var aRequestData = JSON.stringify(param);
							    
			    function aSuccessFunc(data){
			    	$("#thisAllData").html("￥" + FormatMoney(data.info.paymentAmt, 2));
			    	thisData = data.info.list;
			    	if(thisData != null){
			    		optionEcharts();
			    	}
			    	console.log('7天的数据');
			    	console.log(thisData);
			    	
			     }
			    function aErrorFunc(){
			       console.log('未知错误');
			    }
			    
				httpAjaxSession('POST','/ordLog/orderList', aRequestData, aSuccessFunc, aErrorFunc, aTimeOut);
			}

			/**近30天*/
			function thirtyData(){
				var param = {};
				    param["beginDate"] = thirtyDate;
				    param["endDate"] = today;
				
				    var aRequestData = JSON.stringify(param);
								    
				    function aSuccessFunc(data){
				    	$("#thisAllData").html("￥" + FormatMoney(data.info.paymentAmt, 2));
				    	thisData = data.info.list;
				    	if(thisData != null){
				    		optionEcharts();
				    	}
				    	console.log('30天的数据');
				    	console.log(thisData);
				     }
				    function aErrorFunc(){
				       console.log('未知错误');
				    }
				    
    			httpAjaxSession('POST','/ordLog/orderList', aRequestData, aSuccessFunc, aErrorFunc, aTimeOut);
			}
			
			/**更多*/
			function moreData(){
				var param = {};
			    param["beginDate"] = startsDate;
			    param["endDate"] = endDate;
			
			    var aRequestData = JSON.stringify(param);
							    
			    function aSuccessFunc(data){
			    	$("#thisAllData").html("￥" + FormatMoney(data.info.paymentAmt, 2));
			    	thisData = data.info.list;
			    	if(thisData != null){
			    		optionEcharts();
			    	}
			    	console.log('更多');
			    	console.log(thisData);
			     }
			    function aErrorFunc(){
			       console.log('未知错误');
			    }
			    
				httpAjaxSession('POST','/ordLog/orderList', aRequestData, aSuccessFunc, aErrorFunc, aTimeOut);
			}
    		
    		function optionEcharts(){
	    		var getOption = function(chartType) {
					var chartOption = chartType == 'pie' ? {
						calculable: false,
					} : {
						grid: {
							x: 35,
							x2: 10,
							y: 30,
							y2: 25
						},
						toolbox: {
							show: false,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						animation: false, //去掉动画
						calculable: false,
						xAxis: [{
							show: false,
							type: 'category',
							axisLabel: {
	                            textStyle: {
	                                color: '#969697'
	                            }
	                        },
	                        axisLine:{ //X轴颜色--Y轴同理
								lineStyle:{
									color: '#969697'
								}
							},
							data: thisData
						}],
						yAxis: [{
							type: 'value',
							axisLabel: {
								rotate: 40,
	                            textStyle: {
	                                color: '#969697'
	                            }
	                        },
	                        axisLine:{ //X轴颜色--Y轴同理
								lineStyle:{
									color: '#969697'
								}
							},
							splitArea: {
								show: true
							}
						}],
						series: [{
				            name:'模拟数据',
				            type:'line',
				            smooth:true,
				            symbol: 'none', //设置折线图折点形状,none是不显示
				            sampling: 'average',
				            itemStyle: {
				                normal: {
				                    color: '#ec8664'
				                }
				            },
				            areaStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                        offset: 0,
				                        color: '#fbe7e1'
				                    }, {
				                        offset: 1,
				                        color: '#fbe7e1'
				                    }])
				                }
				            },
				           data: thisData
						}]
					};
					return chartOption;
				};
				
				var byId = function(id) {
					return document.getElementById(id);
				};
				
				var lineChart = echarts.init(byId('lineChart'));
				lineChart.setOption(getOption('line'));
			}
			
    		$("#backRef").click(function(){
    			backRef("3");
    		})
    		
			function backRef(){
				window.javatojs.JSWithTypeAndJsonString("3");
			}
    	</script>
    	
 	</body>
</html>